<template>
  <div class="job-detail-page">
    <GetBioJobNavbar />
    
    <div class="job-detail-container">
      <div class="job-detail-main">
        <!-- Job Header -->
        <div class="job-header">
          <h1 class="job-title">Senior Bioinformatics Scientist</h1>
          <div class="job-company-info">
            <span class="company-name">
              <i class="el-icon-office-building"></i>
              GenomeTech Solutions
            </span>
            <el-tag size="small" type="info">Biotech</el-tag>
            <i class="el-icon-star-off bookmark-icon"></i>
          </div>
        </div>

        <!-- Job Overview -->
        <div class="job-overview">
          <div class="overview-item">
            <i class="el-icon-location"></i>
            <span>Boston, MA</span>
          </div>
          <div class="overview-item">
            <i class="el-icon-briefcase"></i>
            <span>Entry Level</span>
          </div>
          <div class="overview-item">
            <i class="el-icon-time"></i>
            <span>Full-time</span>
          </div>
          <div class="overview-item">
            <i class="el-icon-house"></i>
            <span>Hybrid</span>
          </div>
          <div class="overview-item">
            <span>Job Function: Research & Development</span>
          </div>
          <div class="overview-item">
            <span>Posted: 3 days ago</span>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons">
          <el-button type="primary" size="large">
            <i class="el-icon-check"></i>
            Apply Now
          </el-button>
          <el-button size="large" plain>
            <i class="el-icon-document"></i>
            Tailor Your Resume
          </el-button>
          <el-button size="large" plain>
            <i class="el-icon-paperclip"></i>
            Issue Report
          </el-button>
        </div>

        <!-- About Company -->
        <div class="section">
          <h2 class="section-title">About GenomeTech Solutions</h2>
          <div class="company-tags">
            <el-tag>Biotechnology</el-tag>
            <el-tag>501-1000 employees</el-tag>
          </div>
          <p class="section-content">
            GenomeTech Solutions is a leading biotechnology company focused on personalized medicine and genomic analysis. We leverage cutting-edge AI-driven insights to advance healthcare and improve patient outcomes.
          </p>
        </div>

        <!-- Job Description -->
        <div class="section">
          <h2 class="section-title">Job Description</h2>
          <p class="section-content">
            We are seeking a talented Senior Bioinformatics Scientist to join our research team. You will lead the development of algorithms for genomic data analysis and collaborate with cross-functional teams to drive innovative solutions.
          </p>
          <p class="section-content">
            The ideal candidate will have a strong background in computational biology and experience with large-scale genomic datasets. You will work on cutting-edge projects that have the potential to transform healthcare.
          </p>
        </div>

        <!-- Requirements -->
        <div class="section">
          <h2 class="section-title">Requirements</h2>
          <ul class="requirements-list">
            <li><i class="el-icon-check"></i> Ph.D. in Bioinformatics, Computational Biology, or related field</li>
            <li><i class="el-icon-check"></i> 5+ years of experience in genomic data analysis and algorithm development</li>
            <li><i class="el-icon-check"></i> Proficiency in Python, R, and command-line tools</li>
            <li><i class="el-icon-check"></i> Experience with cloud computing platforms (AWS, GCP, or Azure)</li>
            <li><i class="el-icon-check"></i> Strong publication record in peer-reviewed journals</li>
          </ul>
        </div>

        <!-- Other Information -->
        <div class="section">
          <h2 class="section-title">Other Information</h2>
          <div class="info-grid">
            <div class="info-item">
              <i class="el-icon-money"></i>
              <span>Competitive salary: $120K - $160K</span>
            </div>
            <div class="info-item">
              <i class="el-icon-service"></i>
              <span>Comprehensive health coverage</span>
            </div>
            <div class="info-item">
              <i class="el-icon-data-line"></i>
              <span>Equity participation</span>
            </div>
            <div class="info-item">
              <i class="el-icon-promotion"></i>
              <span>Unlimited PTO</span>
            </div>
          </div>
        </div>

        <!-- Premium Benefits -->
        <el-card class="premium-card">
          <div class="premium-content">
            <i class="el-icon-lock"></i>
            <div>
              <h3>Premium Member Benefits</h3>
              <p>Unlock full access to Biopharma Resume Template</p>
            </div>
            <el-button type="primary" @click="$router.push('/pricing')">Upgrade Now</el-button>
          </div>
        </el-card>
      </div>

      <!-- Sidebar -->
      <div class="job-detail-sidebar">
        <h3 class="sidebar-title">Similar Jobs</h3>
        <div class="similar-jobs">
          <div
            v-for="job in similarJobs"
            :key="job.id"
            class="similar-job-item"
            @click="$router.push(`/jobs/${job.id}`)"
          >
            <h4 class="similar-job-title">{{ job.title }}</h4>
            <div class="similar-job-company">{{ job.company }}</div>
            <div class="similar-job-location">{{ job.location }}</div>
            <div class="similar-job-posted">Posted {{ job.posted }}</div>
          </div>
        </div>
        <el-button type="text" class="view-all-btn">View All Similar Jobs</el-button>
      </div>
    </div>

    <GetBioJobFooter />
  </div>
</template>

<script>
export default {
  name: 'JobDetailPage',
  data() {
    return {
      similarJobs: [
        {
          id: 2,
          title: 'Computational Biologist',
          company: 'Biobasis Analytics',
          location: 'Cambridge, MA • Remote',
          posted: '2 days ago'
        },
        {
          id: 3,
          title: 'Data Scientist - Genomics',
          company: 'Genomics Health Inc',
          location: 'San Francisco, CA • Hybrid',
          posted: '1 week ago'
        },
        {
          id: 4,
          title: 'Principal Scientist - Bioinformatics',
          company: 'MedGen Research',
          location: 'New York, NY • On-site',
          posted: '3 days ago'
        },
        {
          id: 5,
          title: 'Research Scientist - Machine Learning',
          company: 'AI Therapeutics',
          location: 'Seattle, WA • Remote',
          posted: '5 days ago'
        }
      ]
    }
  }
}
</script>

<style scoped>
.job-detail-page {
  min-height: 100vh;
  background-color: #fff;
}

.job-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

.job-detail-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.job-header {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 24px;
}

.job-title {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 16px;
}

.job-company-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-name {
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bookmark-icon {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  margin-left: auto;
}

.job-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.overview-item i {
  font-size: 18px;
  color: #000;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  flex: 1;
  min-width: 150px;
}

.section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin-bottom: 16px;
}

.section-content {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 16px;
}

.company-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.requirements-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}

.requirements-list i {
  color: #67c23a;
  font-size: 18px;
  margin-top: 2px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.info-item i {
  font-size: 24px;
  color: #409eff;
}

.info-item span {
  font-size: 14px;
  color: #666;
}

.premium-card {
  background-color: #fff7e6;
  border: 1px solid #ffd04b;
}

.premium-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.premium-content i {
  font-size: 32px;
  color: #ff6b35;
}

.premium-content h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #000;
}

.premium-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.job-detail-sidebar {
  position: sticky;
  top: 80px;
  height: fit-content;
}

.sidebar-title {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-bottom: 24px;
}

.similar-jobs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.similar-job-item {
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.similar-job-item:hover {
  background-color: #f0f0f0;
}

.similar-job-title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
}

.similar-job-company {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.similar-job-location {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.similar-job-posted {
  font-size: 12px;
  color: #999;
}

.view-all-btn {
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 968px) {
  .job-detail-container {
    grid-template-columns: 1fr;
  }
  
  .job-detail-sidebar {
    position: static;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>

